<template>
	<view class="color333 activityDetail">
		<uni-mdnav :title="`活动主页`"></uni-mdnav>
		<view class="bgBox">
			<view class="bg">
				<image class="" :src="actInfo.cover" mode="widthFix"></image>
			</view>
			<view class="info" :style="{'padding-top':paddingTop>0?(paddingTop+'px'):'150rpx'}">
				<!-- 个人信息 -->
				<view class="alignCenter flex">
					<image class="avater" v-if="actInfo.logo" :src="actInfo.logo" mode=""></image>
					<view class="avater bold sharefont22 avaterBox" v-if="(!actInfo.logo && actInfo)">{{actInfo.name.substring(0,1)}}</view>
					<view class="nickName">
						<view class="">
							<view class="bold font16 hiddenOneline actTitle">{{actInfo.name}}</view>
							<view class="font14 colorRed intro" v-if="actInfo.amount">{{actInfo.amount}}元</view>
							<view class="font14 fan">{{actInfo.joinActivityTotal}}人已参与</view>
						</view>
					</view>
				</view>
				<uni-icons class="set" type="gear" size="30" :style="{'top':paddingTop>0?(paddingTop+'px'):'150rpx'}" @click="toManage"></uni-icons>
			</view>
			
		</view>
		<view class="menu">
			<view class="font14 menuMain">
				<view class="vipBox">
					<view class="flex alignCenter vip justConBetween">
						<view class="flex alignCenter">
							<text class="bold">关联的小组</text>
							<view class="font12 noWidthBtn" v-if="isOwner" @click="groupOper('add')"><text class="focusMargin">+</text>添加小组</view>
						</view>
						<view class="colorccc" @click="groupOper('all')">全部<uni-icons color="#ccc" type="forward" size="15" @click="groupOper('all')"></uni-icons></view>
					</view>
				</view>
				<view class="flex group justConBetween">
					<template v-for="(item,index) in groupData">
						<view class="groupOne" :key="index">
							<uni-mygroup :groupItem="item" :canAdd="item.loginTeamUserVO.userState>1" :canActivity="false" :canStar="false" @groupComOper="groupComOper"></uni-mygroup>
						</view>
					</template>
				</view>
				<view class="group">
					<uni-nodata v-if="groupData.length==0"></uni-nodata>
				</view>
			</view>
		</view>
		<view class="task">
			<view class="font18 taskTitle bold">打卡任务</view>
			<view class="">
				<template v-for="(item,index) in taskData">
					<uni-task :taskItem="item" :groupId="groupId" :canNote="actInfo.isJoinActivity" :key="index" @opertask="opertask"></uni-task>
				</template>
				<uni-nodata v-if="taskData.length==0"></uni-nodata>
			</view>
		</view>
		<!-- <view class="noWidthBtn taskBtn" @click="toAddTask">+打卡任务</view> -->
		<view class="actFixedBottom flex alignCenter justConBetween">
			<view class="flex alignCenter detailOper justConAround">
				<view class="" @click="starClick">
					<image :src="actInfo.isCollection?'https://image.alhelp.net/uploads/20231104/39ffc5692e205ff0b376a0b9da9ca833.png':'/static/image/hot/col3.png'" mode="widthFix"></image>
					<view class="font14">收藏</view>
				</view>
				<view class="" @click="showAskLayer=true">
					<image src="@/static/image/icons/ask.png" mode="widthFix"></image>
					<view class="font14">咨询</view>
				</view>
			</view>
			<view class="noWidthBtn taskBtn" @click="applyJoin" v-if="!isOwner && !actInfo.isJoinActivity"><text class="focusMargin">+</text>加入活动</view>
			<view class="noWidthBtn taskBtn" @click="toAddTask" v-if="isOwner"><text class="focusMargin">+</text>创建任务</view>
		</view>
		<!-- 咨询 -->
		<view class="askLayer flex alignCenter" v-if="showAskLayer">
			<view class="askMain">
				<view class="">
					<view class="font14 bold askTitle">咨询活动</view>
					<image v-if="actInfo.contactQrCode" :src="actInfo.contactQrCode" mode="widthFix"></image>
					<view class="phone" v-if="(actInfo.contactPhone && !actInfo.contactQrCode)">{{actInfo.contactPhone.substring(0,3)}}****{{actInfo.contactPhone.substring(7,11)}}</view>
					<view class="normalBtnStyle" @click="callPhone">电话联系</view>
				</view>
				<uni-icons type="close" color="#fff" size="30" @click="showAskLayer=false"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import { actDetail,joinActivity,activityGroup,activityTask } from "@/api/send.js"
	import { operAboutHot } from "@/api/school.js"
	import { payBeforeTip } from "@/utils/common.js"
	import { accountWxTopHeight } from "@/utils/common.js"
	import uniTask from "@/pages/send/components/uni-task/uni-task.vue"
	export default {
		components:{
			uniTask
		},
		data() {
			return {
				groupData:[],
				actInfo:'',
				activityId:'',
				isOwner:false,
				taskData:[],
				page:1,
				pageSize:20,
				pageTotal:0,
				groupId:'',
				paddingTop:0,
				showAskLayer:false,
			};
		},
		onLoad(option) {
			this.activityId=option.id?option.id:''
			this.groupId=option.groupId?option.groupId:''
			// #ifdef MP
			this.paddingTop=accountWxTopHeight()
			// #endif
			console.error("小组id",this.groupId)
		},
		onShow() {
			this.initPage()
			this.getDetail()
			this.getGroup()
			this.getTaskList()
		},
		methods:{
			clickLeft(){
				uni.navigateBack({
					delta:1
				})
			},
			initPage(){
				this.page=1;
				this.taskData=[]
			},
			getDetail(){
				// let pages = getCurrentPages(); // 当前页面路由
				// let beforePage = pages[pages.length - 2]; // 上一个页面路由
				// let curRoute = pages[pages.length - 1].route; //获取当前页面路由
				let param={
					id:this.activityId,
					teamId:this.groupId?this.groupId:''
				}
				actDetail(param).then((res)=>{
					if(res.code==100000){
						this.actInfo=res.data
						this.isOwner=(uni.getStorageSync('userId')==res.data.createUserId)
					}
				})
			},
			// 活动下的小组
			getGroup(){
				let param={
					page:1,
					size:2,
					teamActivityId:this.activityId
				}
				activityGroup(param).then((res)=>{
					if(res.code==100000){
						this.groupData=res.data.rows
					}
				})
			},
			// 活动下的任务
			getTaskList(){
				let param={
					page:this.page,
					size:this.pageSize,
					activityId:this.activityId
				}
				activityTask(param).then((res)=>{
					if(res.code==100000){
						this.taskData=this.taskData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				})
			},
			// 管理
			toManage(){
				uni.navigateTo({
					url:'/pages/send/activity/activityManage/activityManage?id='+this.activityId
				})
			},
			// 小组操作（添加、全部）
			groupOper(type){
				if(type=='add'){
					uni.navigateTo({
						url:'/pages/send/activity/aboutGroup/aboutGroup?id='+this.activityId
					})
					return
				}else{
					uni.navigateTo({
						url:'/pages/send/activity/aboutGroup/aboutGroup?id='+this.activityId+'&oper=seeAll'
					})
					return
				}
			},
			// 小组组件的操作的回调
			groupComOper(obj){
				if(obj.type=='add'){
					this.getGroup()
				}
			},
			// 加入活动
			applyJoin(){
				// uni.showModal({
				// 	title: '提示',
				// 	content: '加入活动后需要按照活动设置的打卡模式，对任务进行打卡，是否确定加入？',
				// 	success:(res)=>{
				// 		if (res.confirm) {
				// 			let param={
				// 				activityId:this.activityId,
				// 				teamId:this.groupId?this.groupId:''//beforePage.route.indexOf('groupDetail')!=-1?beforePage.groupId:''
				// 			}
				// 			joinActivity(param).then((res)=>{
				// 				if(res.code==100000){
				// 					uni.showToast({
				// 						title:'加入成功',
				// 						icon:'none'
				// 					})
				// 					this.getDetail()
				// 				}
				// 			})
				// 		} else if (res.cancel) {}
				// 	}
				// });
				if(!this.groupId){
					uni.showModal({
						title: '提示',
						content: '加入活动必须要选择一个要加入的小组，是否前往选择？',
						success:(res)=>{
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/send/activity/userBindGroup/userBindGroup?activity='+JSON.stringify(this.actInfo)
								})
							} else if (res.cancel) {}
						}
					});
					return
				}
				let tip=`加入该活动需要付费${this.actInfo.amount}元，是否确定加入？`
				let param={
					type:4,
					money:this.actInfo.amount,
					id:this.actInfo.id,
					groupId:this.groupId,
					fromPage:'activityDetail'
				}
				payBeforeTip(param,tip)
			},
			// 收藏
			starClick(){
				let param={
					isAdd:!this.actInfo.isCollection,
					modelId:this.actInfo.id,
					modelType:4,//1提问 2回答 -2待回答 3小组 4活动
				}
				operAboutHot(param).then((res)=>{
					if(res.code==100000){
						this.actInfo.isCollection=!this.actInfo.isCollection
					}
				})
			},
			toAddTask(){
				uni.navigateTo({
					url:'/pages/send/task/task?id='+this.activityId
				})
			},
			// 结束任务
			opertask(type,item){
				if(type=='end'){
					this.initPage()
					this.getTaskList()
				}
			},
			// 打电话
			callPhone(){
				uni.makePhoneCall({
					phoneNumber: this.actInfo.contactPhone,
					success(res) {
						console.log('打电话成功',res)
					},
					fail(err) {
						console.log('打电话失败',err)
					}
				});
			}
		}
	}
</script>
<style lang="scss">
@import "@/static/public.scss";	
page{
	background-color:$pageBgColor;
}
</style>
<style lang="scss" scoped>
	@import "@/static/public.scss";
	// 自定义导航栏
	::v-deep .uni-navbar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
	}
	::v-deep .uni-navbar__content{
		background-color: transparent !important;
		border:none;
	}
	::v-deep .uni-navbar__header{
		background-color: transparent !important;
	}
	.activityDetail{
		padding: 0 0 150rpx;
	}
	.bgBox{
		height:500rpx;
		position: relative;
		.bg{
			width:100%;
			height:100%;
			overflow: hidden;
			image{
				width:100%;
				height:100%;
			}
		}
		.info{
			position: absolute;
			top:0;
			left:0;
			padding: 120rpx 50rpx 0;
			width:100%;
			height: 100%;
			box-sizing: border-box;
			// background: rgba(255, 255, 255, .8);
			background: rgba(0,0,0,.25);
			color: #fff;
			/* #ifdef APP-PLUS */
			padding: 150rpx 50rpx 0;
			/* #endif */
			.avater{
				width: 148rpx;
				height: 148rpx;
				border-radius: 50%;
				margin-right: 14rpx;
				flex-shrink: 0;
			}
			.avaterBox{
				text-align: center;
				line-height: 148rpx;
				background: $colorMain;
				flex-shrink: 0;
			}
			.nickName{
				flex:1;
				.actTitle{
					max-width: 70%;
				}
			}
			.fan{
				text{
					display: inline-block;
					margin-right: 18rpx;
				}
			}
			.set{
				position:absolute;
				right:30rpx;
				top:120rpx;
				/* #ifdef APP-PLUS */
				top:150rpx;
				/* #endif */
				i{
					display: inline-block;
					margin-right: 10rpx;
				}
			}
		}
	}
	.menu{
		position:relative;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		z-index: 10;
		margin:-160rpx 0 0;
		.menuMain{
			border-radius: 68rpx 68rpx 6rpx 6rpx;
			box-shadow: 6rpx 6rpx 6px rgba(153,153,153,.35);
			.vipBox{
				border-radius: 68rpx 68rpx 0 0;
				padding: 0 2rpx 0;
			}
			.vip{
				background: #fff;
				padding:30rpx 50rpx;
				border-radius: 68rpx 68rpx 0 0;
				box-sizing: border-box;
				.noWidthBtn{
					margin-left: 10rpx;
					padding:16rpx 24rpx;
				}
			}
			.group{
				padding: 0 20rpx 30rpx;
				box-sizing: border-box;
				background: #fff;
				border-radius:0 0 6rpx 6rpx;
				.groupOne{
					flex: 0 0 48%;
					// border: 1px solid $bordercolor;
					border-radius: 8rpx;
				}
			}
		}
	}
	.task{
		padding: 40rpx 0 0;
		.taskTitle{
			margin:0 0 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
		}
	}
	.actFixedBottom{
		position: fixed;
		left:0;
		bottom:0;
		width:100%;
		background:#fff;
		padding:10rpx 30rpx;
		box-sizing: border-box;
		box-shadow: 0 0 8rpx 0 rgba(0,0,0,.2);
		image{
			width: 60rpx;
			height:60rpx;
			display: block;
			margin: 0 auto;
		}
		.detailOper{
			flex:1;
		}
		.taskBtn{
			flex:0 0 30%;
			flex-shrink: 0;
			padding: 10rpx 0;
		}
	}
	.askLayer{
		position:fixed;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.4);
		z-index:300;
		.askMain{
			width:80%;
			margin: auto;
			text-align: center;
			&>view{
				text-align: center;
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 50rpx;
				box-sizing: border-box;
				margin:0 0 30rpx;
			}
			image{
				width:100%;
				display: block;
				margin:30rpx 0 0;
			}
			.phone{
				margin:30rpx 0;
			}
			.normalBtnStyle{
				box-shadow: none;
				margin:50rpx auto 0;
			}
		}
	}
</style>
